<template>
	<el-main>
		<el-row>
			<el-col>
				<v-chart class="chart" :option="barOption" />
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import { use } from "echarts/core";
	import { CanvasRenderer } from "echarts/renderers";
	import { BarChart } from "echarts/charts";
	import {
		TitleComponent,
		TooltipComponent,
		LegendComponent,
		GridComponent
	} from "echarts/components";
	import VChart, { THEME_KEY } from "vue-echarts";
	use([
		CanvasRenderer,
		BarChart,
		TitleComponent,
		TooltipComponent,
		LegendComponent,
		GridComponent
	]);
	export default {
		components: {
			VChart
		},
		provide: {
			[THEME_KEY]: "light"
		},
		data() {
			return {
				barOption: {
					title: {
						text: '网络人气偶像',
						subtext: '网络人气偶像榜单'
					},
					tooltip: {
						trigger: "axis",
						formatter: (params)=> {
							return params[0].marker + params[0].name 
							+ `<br/> ` + `人气指数：` +  params[0].value + `次`;
						},
						axisPointer: {
							type: 'shadow'
						}
					},
					xAxis: {
						type: 'category',
						data: [],
						axisLabel: {
							formatter: function(value) {
								var res = value;
								// 长度超过4个的以省略号显示
								if (res.length > 5) {
									res = res.substring(0, 4) + "...";
								}
								return res;
							}
						}
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [],
						type: 'bar'
					}]
				}
			}
		},
		mounted() {
			this.barOption.xAxis.data.push(
				"刘德华","张学友","郭富城","黎明"
			);
			this.barOption.series[0].data.push(
				30,50,20,25
			);
		}
	}
</script>

<style scoped>
	.chart {
		min-height: 400px;
	}
</style>
